﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../Lib/Css/site.css" rel="stylesheet" />
    <script src="../Lib/Js/jquery.min.js"></script>
    <script src="../Lib/Js/JSXTransformer.js"></script>
    <script src="../Lib/Js/react.js"></script>
</head>
<body>
    <p>this.props.children</p>
    <div id="d1"></div>
    <div id="d2"></div>
</body>
</html>
<script type="text/jsx">
   var NodeList  = React.createClass({
        render:function(){
            if(!this.props.children.length){
                return <span className='red'>{this.props.count}</span>
            }
            else{
                return  (
                    <ol>{
                        this.props.children.map(function(item){
                            return <li>{item}</li>
                        })   
                    }</ol>
                );
            }
        },
    });

    var Child = React.createClass({
        render:function(){
            return <p className={this.props.cls}>{this.props.name}</p>
        }
    });

    React.render(
        <NodeList count="children count is 1">
            <Child cls='red' name='Hello'></Child>
            <a>World-2</a>
            <p className='red'>fff</p>
        </NodeList>,
    $("#d1").get(0)
    );

    React.render(
        <tops>
            <s>hello world - d2.1</s>
            <ss>hello world - d2.2</ss>
        </tops>,
      $("#d2").get(0)  
    );
</script>